<template>
    <view class="container" :style="themeColor">
        <search-bar :placeholderText="placeholderText" @searchFn="searchFn"> </search-bar>
        <!-- <tab-bar-border :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar-border>3-->
        <view v-if="!isloadding">
            <swiper
                class="product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(itemt, i) in tabs">
                    <project-list
                        v-if="load"
                        ref="mescrollItem"
                        :i="i"
                        :index="tabIndex"
                        :tabs="tabs"
                        :height="listHeight"
                        :state="itemt.state"
                        :requestData="requestData"
                        @selProject="selProject">
                    </project-list>
                </swiper-item>
            </swiper>
        </view>
        <view class="bottom-bar">
            <text class="btn btn-success" @click="goUrl('/pages_me/packet/project/add')">申请项目</text>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import projectList from "@/pages_me/components/project/project-list.vue"
import tabBarBorder from "@/components/common/tab-bar-border.vue"

import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    components: {
        searchBar,
        projectList,
        tabBarBorder,
    },
    data() {
        return {
            placeholderText: "项目名称/地址",
            current: 0,
            // tabs: [{
            // 		title: "全部",
            // 		state: "-1",
            // 	},
            // 	{
            // 		title: "待审核",
            // 		state: "0",
            // 	},
            // 	{
            // 		title: "已审核",
            // 		state: "1",
            // 	},
            // 	{
            // 		title: "已驳回",
            // 		state: "2",
            // 	},
            // 	{
            // 		title: "已完成",
            // 		state: "3",
            // 	},
            // 	{
            // 		title: "已关闭",
            // 		state: "4",
            // 	}
            // ],
            tabs: [
                {
                    title: "已审核",
                    state: "1",
                },
            ],
            isloadding: false,
            listHeight: 0,
            tabIndex: 0, // 当前tab的下标
            load: false,
            searchKey: "",
            requestData: {
                searchKey: "",
                startTime: "",
                endTime: "",
            },
        }
    },
    watch: {
        //监听更新
        getProjectView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getProjectView"]),
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        getListHeight(element) {
            //获取列表高度
            getElementHeight(this, ".bottom-bar", (e) => {
                let bottomBarHeight = e
                //再获底栏表高度
                getElementHeight(this, ".product-main-list", (e) => {
                    //再获取列表高度
                    this.listHeight = e - uni.upx2px(130) + "px"
                    this.load = true
                })
            })
        },
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        swiperChange(e) {
            this.tabIndex = e.detail.current
            this.clickTab(this.tabIndex)
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //筛选
        doFilter(data) {
            this.requestData.startTime = data.startDate ? data.startDate + "T00:00:00.000Z" : ""
            this.requestData.endTime = data.endDate ? data.endDate + "T23:59:59.000Z" : ""
            this.refresh()
        },
        changeSearchValue(value) {
            //搜索关键字回调
            this.requestData.searchKey = value
        },
        refresh() {
            this.isloadding = true
            this.$nextTick(() => {
                this.isloadding = false
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        selProject(data) {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit("getSelectData", {
                ...data,
            })
            this.easyGoBack()
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}

.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        border-radius: 100rpx;
        height: 88rpx;
        font-size: 32rpx;
    }
}
</style>
